<!-- 区域的组件 -->
<template>
  <el-row>
    <el-card
      class="box-card"
      :header="widget.options.header"
      :shadow="widget.options.shadow"
    >
      <div v-for="(column1, index) in tableData">
        <div
          v-for="(column, p_index) in columns"
          :key="column.key"
          :class="{
            'el-col-24':
              columns.length % 2 != 0 && p_index == columns.length - 1
          }"
        >
          <el-col
            :span="column.options !== undefined && column.options.span"
            class="drag-widget field-item"
          >
            <!--			<label v-if="column.type != 'divider'" style="min-width:70px;float: left;"  :class="{'is_req': column.options.required,'display':'block'}"> {{column.name}}: </label>-->
            <div v-if="column">
              <div v-if="column.model">
                <el-form-item
                  :class="{ is_req: column.options.required, display: 'block' }"
                  :label="getLable(column)"
                  :prop="widget.model + '.' + index + '.' + column.model"
                  :rules="column.rules ? column.rules : []"
                >
                  <GenerateElementItem
                    :blanks="blanks"
                    is-table="block"
                    :path="widget.model + '.' + index + '.' + column.model"
                    v-model="value[index][column.model]"
                    :models_temp="models_temp"
                    :widget="column"
                    :remote="remote"
                    :models.sync="dataModels"
                    :strutAll="strutAll"
                    :index="2"
                  >
                  </GenerateElementItem>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </div>
      </div>
    </el-card>
  </el-row>
</template>

<script>
import { importXLSX } from "../../router/xlsx.js";
import { verification } from "../../router/verification.js";
import { getLable } from "../../js/formUtils.js";

function isInArray(arr, value) {
  for (var i = 0; i < arr.length; i++) {
    if (value === arr[i]) {
      return true;
    }
  }
  return false;
}
export default {
  components: {
    GenerateElementItem: () => import("../../GenerateElementItem.vue")
  },
  props: [
    "columns",
    "value",
    "models",
    "remote",
    "blanks",
    "models_temp",
    "widget",
    "strutAll",
    "data",
    "path"
  ],
  data() {
    //console.log(this.columns[0].options.defaultValue);
    return {
      tableData: this.value,
      dataModels: this.models,
      checkedCities: [],
      dialogVisible: false,
      dialogFormVisible: false
    };
  },
  created() {
    for (var i = 0; i < this.columns.length; i++) {
      if (this.columns[i].rules) {
        for (var j = 0; j < this.columns[i].rules.length; j++) {
          this.columns[i].rules[j].validator = this.validatePass;
        }
      }
    }
  },
  methods: {
    getLable: function(element) {
      return getLable(element);
    },
    validatePass(rule, info, callback) {
      verification(rule, info, callback);
    },
    handleAddRow() {
      var dataModels = this.dataModels;
      let item = {};
      if (this.columns !== undefined) {
        if (this.columns.length > 0) {
          for (let i = 0; i < this.columns.length; i++) {
            item[this.columns[i].model] = "";
          }
        }
      }
      this.tableData.push(item);
    },
    handleRemove(index) {
      this.tableData.splice(index, 1);
    },
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true;
        }
      }
      return false;
    },
    handleImport() {},
    handleClose() {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleCheckedCitiesChange(value) {
      this.checkedCities = value;
    },
    exportData() {
      this.dialogFormVisible = false;
    },
    confirmDialog(value) {
      this.dialogFormVisible = false;
      var checkedCities = this.checkedCities;
      if (checkedCities.length == 0) {
        return;
      }
      var title = [];
      var columns = this.columns;
      for (var i = 0; i < columns.length; i++) {
        var column = columns[i];
        var exist = isInArray(checkedCities, column.model);
        if (exist) {
          title.push(column.name);
        }
      }
      var items = [];
      for (let i = 0; i < this.checkedCities.length; i++) {
        var item = [];
        for (let j = 0; j < this.tableData.length; j++) {
          item.push(this.tableData[j][this.checkedCities[i]]);
        }
        items[this.checkedCities[i]] = item;
      }
      console.log(items);
      console.log(title);
      var _data = [];
      _data.push(title);

      for (let j = 0; j < this.tableData.length; j++) {
        var t = this.tableData[j];
        var td = [];
        for (let i = 0; i < this.checkedCities.length; i++) {
          var d = t[checkedCities[i]];
          td.push(d);
        }
        _data.push(td);
      }
      importXLSX(_data, this.widget.name);
    }
  },
  watch: {}
};
</script>

<style lang="scss">
.row-bd {
  border: 1px solid #ebeef5;
  padding-top: 12px;
}
.addRow {
  display: block !important;
  margin-top: 18% !important;
}
.is_req {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
